p {
  margin-bottom: 0;
}

.loading::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0.8;
  position: fixed;
  z-index: 1000;
}

.loading::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("../images/loading.svg");
  background-size: 40px;
  background-repeat: no-repeat;
  position: fixed;
  z-index: 1001;
  top: 50%;
 color: red;
  left: calc(50% - 50px);
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rootGraph {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 1px 0 #f6f6f6;
  box-sizing: border-box;

  #graphContent {
    width: 100%;
    height: 100%;
    background: white;
    position: relative;

    .custom_bar {
      top: 10px;
      left: 15px;
      position: absolute;
      z-index: 2;
      display: flex;

      .option {
        margin-right: 10px;

        &.icon_box {
          display: flex;
          align-items: center;
          height: 38px;
          line-height: 38px;
          border: 1px solid lightgrey;
          box-sizing: border-box;
          box-shadow: 0 0 10px 0 lightgrey;

          .half_content {
            display: flex;
          }

          .icon {
            width: 38px;
            text-align: center;
            font-size: 18px;
            cursor: pointer;
            font-weight: bolder;

            &:hover {
              color: #4579f1;
            }
          }
        }
      }

      .ant-input-affix-wrapper,
      :deep(.ant-select-selector),
      .ant-btn {
        height: 38px;
        line-height: 38px;
        box-sizing: border-box;
        box-shadow: 0 0 10px 0 lightgrey;
      }

      :deep(.ant-select-selection-item) {
        line-height: 38px;
      }
    }

    :deep(.g6-grid-container) {
      z-index: 0 !important;
    }

    :deep(.g6-component-tooltip) {
      width: 200px;
      border: 1px solid #e2e2e2;
      background-color: white;
      opacity: 1;
      z-index: 1000;

      .g6-tooltip {
        p {
          height: 20px;
          line-height: 20px;
        }
      }
    }

    :deep(.g6-legend-container) {
      top: 12px !important;
      right: 16px !important;
      left: auto !important;
    }

    :deep(canvas) {
      position: relative;
      z-index: 1 !important;
    }

    :deep(.g6-component-toolbar) {
      z-index: 2;
    }
  }
}

